<template>
  <div class="out-style">
    <el-form label-width="220px" :model="ruleForm" ref="ruleForm" :rules="rules">
      <h2>{{$t('message.cg-title')}}</h2>
      <h3 class="size">
        {{$t('message.cglx')}}
        <span>: {{releaseName}}</span>
      </h3>
      <p class="divider"></p>
      <div class="mian-title">{{$t('message.cgmc')}}</div>
      <div class="inner-style">
        <el-form-item :label="$t('message.chinese')+':'" prop="releaseTitleCn">
          <el-input maxlength="128" :placeholder="$t('message.p-cgmc')" v-model="ruleForm.releaseTitleCn"></el-input>
        </el-form-item>
        <el-form-item v-if="isShowEnglish" :label="$t('message.english')+':'" prop="releaseTitleEn">
          <el-input maxlength="128" :placeholder="$t('message.p-en')" v-model="ruleForm.releaseTitleEn"></el-input>
        </el-form-item>
      </div>
      <p class="divider"></p>
      <div class="mian-title">{{$t('message.cgjj')}}</div>
      <div class="inner-style">
        <el-form-item :label="$t('message.fbnr')+':'" prop="releaseContent">
          <el-input
            type="textarea"
            :rows="6"
            style="width: 80%;"
            :maxlength="512"
            show-word-limit
            resize="none"
            :placeholder="$t('message.p-srnr')"
            v-model="ruleForm.releaseContent"
          ></el-input>
        </el-form-item>
        <!-- 上传文件 -->
        <el-form-item :label="$t('message.scfj')+':'">
          <upload-file ref="file" :pfileList="cfileList"></upload-file>
        </el-form-item>
        <el-form-item :label="$t('message.fbrq')+':'" prop="releaseTime">
          <el-date-picker
            v-model="ruleForm.releaseTime"
            value-format="timestamp"
            type="date"
            :placeholder="$t('message.p-qxz')"
          ></el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('message.fbdq')+':'" prop="border">
          <el-select
            v-model="ruleForm.border"
            style="display: inline-block;"
            @change="chooseBorder"
            class="select"
            :placeholder="$t('message.p-qxz')"
          >
            <el-option :label="$t('message.jn')" value="within"></el-option>
            <el-option :label="$t('message.jw')" value="overseas"></el-option>
          </el-select>
          <el-form-item
            :label="$t('message.gndq')+':'"
            prop="province"
			label-width="130px"
            v-if="ruleForm.border == 'within'"
            style="display: inline-block;"
          >
            <el-select
              v-model="ruleForm.province"
              class="select"
              :placeholder="$t('message.p-qxz')"
              @change="chooseProvince"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.code"
                :label="item.province"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label
            v-if="cityList.length!==0&&ruleForm.border == 'within'"
            class="jk"
            prop="cityCode"
            style="display: inline-block;"
          >
            <el-select
              style="margin-left: 12px;"
              v-model="ruleForm.cityCode"
              class="select"
              :placeholder="$t('message.p-qxz')"
            >
              <el-option
                v-for="item in cityList"
                :key="item.code"
                :label="item.province"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.gbdq')+':'"
            prop="regionCode"
            v-if="ruleForm.border == 'overseas'"
            style="display: inline-block;"
          >
            <el-select v-model="ruleForm.regionCode" filterable :placeholder="$t('message.p-qxz')">
              <el-option
                v-for="item in regionList"
                :key="item.value"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item
          :label="$t('message.zfqysd')+':'"
          prop="attributionProvince"
          v-if="ruleForm.border == 'overseas'"
        >
          <el-select
            v-model="ruleForm.attributionProvince"
            class="select"
            filterable
            :placeholder="$t('message.p-qxz')"
            @change="chooseAttributionProvince"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.code"
              :label="item.province"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label
          v-if="ruleForm.border == 'overseas'&&cityList2.length!==0"
          prop="attributionCityCode"
          style="margin: -62px 160px 20px;"
        >
          <el-select
            v-model="ruleForm.attributionCityCode"
            filterable
            class="select"
            :placeholder="$t('message.p-qxz')"
          >
            <el-option
              v-for="item in cityList2"
              :key="item.code"
              :label="item.province"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.fbcj')+':'" prop="releaseLevel">
          <el-select
            v-model="ruleForm.releaseLevel"
            class="select"
            :placeholder="$t('message.p-qxz')"
          >
            <el-option
              v-for="item in releaseLevel"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="发布类型" prop="releaseCode">
					<el-select style="width: 80%;" v-model="ruleForm.releaseCode" placeholder="请选择">
					    <el-option
					      v-for="item in releaseList"
					      :key="item.dictName"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="ruleForm.releaseCode == 'fblx06'" label="" prop="otherContent">
					<el-input placeholder="自定义类别" v-model="ruleForm.otherContent"></el-input>
        </el-form-item>-->
      </div>
      <p class="divider"></p>
      <div class="mian-title">{{$t('message.hyly')}}</div>
      <div class="inner-style">
        <el-form-item
          :label="$t('message.hyly')+':'"
          prop="releaseFieldOne"
          style="display:inline-block"
        >
          <el-select
            v-model="ruleForm.releaseFieldOne"
            @change="changeOne($event)"
            class="select"
            :placeholder="$t('message.p-qxz')"
          >
            <el-option
              v-for="item in releaseArea"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="secondList.length!==0"
          prop="releaseFieldTwo"
          label
          class="jk"
          style="display:inline-block"
        >
          <el-select
            v-model="ruleForm.releaseFieldTwo"
            @change="changeTwo($event)"
            class="select1"
            :placeholder="$t('message.p-qxz')"
          >
            <el-option
              v-for="item in secondList"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="thirdList.length!==0"
          prop="releaseFieldThree"
          label
          class="jk2"
          style="display:inline-block"
        >
          <el-select
            v-model="ruleForm.releaseFieldThree"
            @change="changeThree($event)"
            class="select2"
            :placeholder="$t('message.p-qxz')"
          >
            <el-option
              v-for="item in thirdList"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isShow" :label="$t('message.qtsm')" prop="releaseFieldOther">
          <el-input :placeholder="$t('message.p-qtfw2')" v-model="ruleForm.releaseFieldOther"></el-input>
        </el-form-item>
      </div>
      <p class="divider"></p>
      <div class="mian-title">{{$t('message.txrxx')}}</div>
      <div class="inner-style">
        <el-form-item :label="$t('message.tbr')+':'" prop="userName">
          <el-input :placeholder="$t('message.p-tbr')" v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('message.lxdh')+':'" prop="userPhone">
          <el-input :placeholder="$t('message.p-phone2')" maxlength="20" onkeyup="this.value=this.value.replace(/[^\d^\+]/,'')" v-model="ruleForm.userPhone"></el-input>
        </el-form-item>
        <el-form-item :label="$t('message.zjhm')+':'" prop="landlineNumber">
          <el-input :placeholder="$t('message.p-tell2')" v-model="ruleForm.landlineNumber"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div class="bnt">
      <el-button
        class="save"
        :disabled="isFlag"
        :loading="isFlag"
        @click="pushSave('ruleForm')"
      >{{$t('message.zc')}}</el-button>
      <el-button
        type="button"
        :disabled="isFlag2"
        :loading="isFlag2"
        @click="submit('ruleForm')"
        class="submit"
      >{{$t('message.tjsh')}}</el-button>
    </div>
  </div>
</template>

<script>
import {
  validNumber,
  checkPhone,
  checkData,
  checkSupplier,
  checkTitle,
  checkLandlinee,
  checkContractId,
  checkContract,
  filledName,
  otherService
} from "@assets/js/validator.js";
import uploadFile from "@components/uploadFile/uploadFile.vue";
import buried from "@/utils/buried";
export default {
  data() {
    return {
      ruleForm: {
        attributionProvince: "",
        attributionCityCode: "",
        releaseFieldOther: "",
        releaseCode: "",
        releaseContent: "",
        releaseFieldOne: "",
        releaseFieldTwo: "",
        releaseFieldThree: "",
        releaseTime: "",
        releaseTitleCn: "",
        releaseTitleEn: "",
        userName: "",
        userPhone: "",
        landlineNumber: "",
        border: "",
        cityCode: "",
        regionCode: "",
        province: "",
        releaseLevel: "",
        ossUrlList: []
      },
      rules: {
        regionCode: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "blur"
          },
		  {
		  	trigger: "change" 
		  }
        ],
        releaseTitleCn: [
          {
            required: true,
            message:this.$t("message.p-cgmc"),
            trigger: "blur"
          }
        ],

        attributionProvince: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "blur"
          },
		  {
			trigger: "change"
		  }
        ],
        releaseTitleEn: [
          {
            required: false,
            validator: checkData,
            trigger: "blur"
          }
        ],
        releaseTime: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "change"
          }
        ],
        border: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "change"
          },{
			  trigger: "blur"
		  }
        ],
        cityCode: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "blur"
          },
		  {
			 trigger: "change" 
		  }
        ],
        attributionCityCode: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "blur"
          },
		  {
		  	trigger: "change" 
		  }
        ],
        province: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "blur"
          },
		  {
		  	trigger: "change" 
		  }
        ],
        releaseLevel: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "change"
          }
        ],
        userName: [
          {
            required: true,
            validator: filledName,
            trigger: "blur"
          }
        ],
        landlineNumber: [
          {
            validator: checkLandlinee,
            trigger: "blur"
          }
        ],
        userPhone: [
          {
            required: true,
            validator: checkPhone,
            trigger: "blur"
          }
        ],
        releaseFieldOne: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "change"
          }
        ],
        releaseFieldTwo: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "change"
          }
        ],
        releaseFieldThree: [
          {
            required: true,
            message: this.$t("message.m1"),
            trigger: "change"
          }
        ],
        releaseFieldOther: [
          {
            required: true,
            message: this.$t("message.m13"),
            trigger: "blur"
          }
        ],
        releaseContent: [
          {
            required: true,
            validator: checkContract,
            trigger: "blur"
          }
        ]
      },
      secondList: [],
      thirdList: [],
      cfileList: [],
      releaseArea: [], // 发布领域 - 全部
      releaseList: [], // 发布领域 - 一级
      contractTypeList: [],
      provinceList: [],
      cityList: [],
      cityList2: [],
      releaseLevel: [],
      secondStr: "", //存二级选中数据
      thirdStr: "",
      otherStr: "",
      state: "",
      typeTitle: "",
      id: 0,
      isShow: false,
      releaseName: "",
      isFlag: false,
      isFlag2: false,
	  isShowEnglish:true
    };
  },
  mounted() {
	buried("result_add_new", "add_new_achieve_fill", { type });
	let type = this.$route.query.type;
	let langs = this.getCookie('site_lang')
	if (langs == 'en-US') {
		this.isShowEnglish = false
	}
    this.releaseList = this.$store.state.releaseList;
    this.releaseArea = this.$store.state.serviceList;
    this.addTypeList = this.$store.state.addTypeList;
    this.provinceList = this.$store.state.provinceAllList;
    this.releaseLevel = this.$store.state.releaseLevelList;
    this.regionList = this.$store.state.regionList;
    // console.log(this.releaseLevel)
    if (this.$route.query.type) {      
      this.ruleForm.releaseCode = type;
      this.addTypeList.forEach(item => {
        if (item.value == type) {
          this.releaseName = item.label;
        }
      });
    }
    this.state = this.$route.query.state;
    if (this.state == "edit") {
      this.updateContract();
    }
    
  },
  components: {
    uploadFile
  },
  watch: {
    releaseArea2: function(val) {
      this.releaseArea = val;
    },
    provinceList2: function(val) {
      this.provinceList = val;
    },
    regionList2: function(val) {
      this.regionList = val;
    }
  },
  computed: {
    releaseArea2() {
      return this.$store.state.serviceList;
    },
    provinceList2() {
      return this.$store.state.provinceAllList;
    },
    regionList2() {
      return this.$store.state.regionList;
    }
  },
  methods: {
	getCookie (cookieName) {
	var strCookie = document.cookie;
	var arrCookie = strCookie.split("; ");
	for (var i = 0; i < arrCookie.length; i++) {
		var arr = arrCookie[i].split("=");
		if (cookieName == arr[0]) {
		  return arr[1];
		}
	}
	return "";
	},
    async updateContract() {
      //编辑暂存回显
      this.$axios
        .get("/api/releaseResult/getReleaseResult", {
          params: {
            id: this.$route.query.id
          }
        })
        .then(res => {
          // console.log(res)
          if (res.code == 200) {
            this.ruleForm.userName = res.data.userName;
            this.ruleForm.userPhone = res.data.userPhone;
            this.ruleForm.landlineNumber = res.data.landlineNumber;
            this.ruleForm.releaseTitleEn = res.data.releaseTitleEn;
            this.ruleForm.releaseTitleCn = res.data.releaseTitleCn;
            this.ruleForm.releaseTime = this.$moment(
              res.data.releaseTime
            ).valueOf();
            this.ruleForm.releaseFieldOne = res.data.releaseFieldOne;
            this.ruleForm.releaseFieldTwo = res.data.releaseFieldTwo;
            this.ruleForm.releaseFieldThree = res.data.releaseFieldThree;
            this.ruleForm.releaseContent = res.data.releaseContent;
            this.ruleForm.releaseCode = res.data.releaseCode;
            this.ruleForm.createTime = res.data.createTime;
            this.ruleForm.releaseLevel = res.data.releaseLevel;
            this.otherStr = res.data.releaseFieldOther;
            this.ruleForm.border = res.data.border;
            this.ruleForm.regionCode = res.data.regionCode;
            this.releaseName = res.data.releaseName;
            this.id = res.data.id;
            // 省市回显
            this.ruleForm.province = res.data.province;
            if (res.data.cityCode !== ""&&res.data.cityCode !== null) {
              this.chooseProvince(this.ruleForm.province);
              this.ruleForm.cityCode = res.data.cityCode;
            }
            // 境外省市回显
            this.ruleForm.attributionProvince = res.data.attributionProvince;
            if (res.data.attributionCityCode !== ""&&res.data.attributionCityCode !== null) {
              this.chooseAttributionProvince(this.ruleForm.attributionProvince);
              this.ruleForm.attributionCityCode = res.data.attributionCityCode;
            }
            // 发布领域回显
            if (res.data.releaseFieldTwo !== ""&&res.data.releaseFieldTwo !== null) {
              this.changeOne(this.ruleForm.releaseFieldOne);
              this.ruleForm.releaseFieldTwo = res.data.releaseFieldTwo;
            }
            if (res.data.releaseFieldThree !== ""&&res.data.releaseFieldThree !== null) {
              this.changeTwo(this.ruleForm.releaseFieldTwo);
              this.ruleForm.releaseFieldThree = res.data.releaseFieldThree;
            }
            // console.log(res.data.releaseFieldOther)
            this.ruleForm.releaseFieldOther = this.otherStr;
            if (this.ruleForm.releaseFieldOther !== ""&&this.ruleForm.releaseFieldOther !== null) {
              this.isShow = true;
            }
            //附件回显
            this.cfileList = res.data.ossUrlList;
            res.data.ossUrlList.forEach(item => {
              this.$refs.file.fileLists.push(item);
            });
          } else {
            this.$message.error(this.$t("message.hxxxsb"));
          }
        });
    },
    changeOne(value) {
      this.isShow = false;
      let indexTab;
      this.clear1();
      this.releaseArea.forEach((item, index) => {
        if (item.dictCode == value) {
          indexTab = index;
        }
      });
      if (value !== "") {
        if (this.releaseArea[indexTab].serviceList.length !== 0) {
          this.releaseArea[indexTab].serviceList.forEach(item => {
            this.secondList.push(item);
          });
        }
      }
    },
    changeTwo(value) {
      this.isShow = false;
      let indexTab;
      this.clear2();
      this.secondList.forEach((item, index) => {
        if (item.dictCode == value) {
          indexTab = index;
        }
      });
      if (this.secondList.length !== 0) {
        if (this.secondList[indexTab].serviceList.length !== 0) {
          this.secondList[indexTab].serviceList.forEach(item => {
            this.thirdList.push(item);
          });
        }
      }
      if (value !== "") {
        if (value.indexOf("qt") !== -1) {
          this.isShow = true;
        }
      }
    },
    changeThree(value) {
      this.isShow = false;
      if (value !== "") {
        if (value.indexOf("qt") !== -1) {
          this.isShow = true;
        }
      }
    },
    chooseBorder(value) {
      // this.$refs['ruleForm'].clearValidate();
      if (value == "overseas") {
        this.ruleForm.province = "";
        this.ruleForm.cityCode = "";
      } else if (value == "within") {
        this.ruleForm.regionCode = "";
      }
    },
    clear1() {
      this.secondList = [];
      this.thirdList = [];
      this.ruleForm.releaseFieldTwo = "";
      this.ruleForm.releaseFieldThree = "";
      this.ruleForm.releaseFieldOther = "";
    },
    clear2() {
      this.thirdList = [];
      this.ruleForm.releaseFieldThree = "";
      this.ruleForm.releaseFieldOther = "";
    },
    chooseAttributionProvince(value) {
      let indexTab;
      this.cityList2 = [];
      this.ruleForm.attributionCityCode = "";
      this.provinceList.forEach((item, index) => {
        if (item.code == value) {
          indexTab = index;
        }
      });
      if (this.provinceList) {
        if (this.provinceList[indexTab].subordinateProvinceList.length !== 0) {
          this.provinceList[indexTab].subordinateProvinceList.forEach(item => {
            this.cityList2.push(item);
          });
        }
      }
    },
    chooseProvince(value) {
      let indexTab;
      this.cityList = [];
      this.ruleForm.cityCode = "";
      this.provinceList.forEach((item, index) => {
        if (item.code == value) {
          indexTab = index;
        }
      });
      if (this.provinceList) {
        if (this.provinceList[indexTab].subordinateProvinceList.length !== 0) {
          this.provinceList[indexTab].subordinateProvinceList.forEach(item => {
            this.cityList.push(item);
          });
        }
      }
    },
    pushSave() {
      const params = this.beforSubmit();
      this.isFlag = true;
      if (this.$route.query.state == "edit") {
        //编辑状态下的暂存
        params.id = this.$route.query.id || this.id || "";
        params.id = Number(params.id);
        this.$axios
          .post("/api/releaseResult/updateReleaseResult", params)
          .then(res => {
            // console.log(res)
            this.isFlag = false;
            if (res.code == 200) {
              this.$message.success(this.$t("message.zccg"));
              this.$router.push({
                path: "/achAdd",
                query: {
                  state: "edit",
                  id: this.$route.query.id
                }
              });
            } else {
              this.$message.error(this.$t("message.zcsb"));
            }
          });
      } else {
        //新建状态下的暂存
        this.$axios
          .post("/api/releaseResult/draftReleaseResult", params)
          .then(res => {
            this.isFlag = false;
            if (res.code == 200) {
              this.$message.success(this.$t("message.zccg"));
              this.$router.push({
                path: "/achAdd",
                query: {
                  state: "edit",
                  id: res.data
                }
              });
              this.id = res.data;
            } else {
              this.$message.error(this.$t("message.zcsb"));
            }
          })
          .catch(err => {
            this.$message.error(err.message);
          });
      }
    },
    submit(formName) {
      //提交
      this.$refs[formName].validate(valid => {
        if (valid) {
          const params = this.beforSubmit();
          this.state = this.$route.query.state || this.state;
          this.isFlag2 = true;
          if (this.state == "edit") {
            //编辑
            params.id = this.$route.query.id || this.id || "";
            this.$axios
              .post("/api/releaseResult/submitReleaseResult", params)
              .then(res => {
                this.isFlag2 = false;
                if (res.code == 200) {
                  this.$message.success(this.$t("message.czcg"));
                  this.$router.push("/achievements");
                } else {
                  this.$message.error(this.$t("message.czsb"));
                }
              })
              .catch(err => {
                console.log(err);
              });
          } else {
            //提交
            this.$axios
              .post("/api/releaseResult/insertReleaseResult", params)
              .then(res => {
                this.isFlag2 = false;
                if (res.code == 200) {
                  this.$message.success(this.$t("message.czcg"));
                  this.$router.push("/achievements");
                } else {
                  this.$message.error(this.$t("message.czsb"));
                }
              })
              .catch(err => {
                console.log(err);
              });
          }
        } else {
          this.$message.error(this.$t("message.m14"));
          return false;
        }
      });
    },
    beforSubmit() {
      const rst = {
        ...this.ruleForm,
        province:
          this.ruleForm.province !== ""
            ? String(this.ruleForm.province)
            : this.ruleForm.province,
        cityCode:
          this.ruleForm.cityCode !== ""
            ? String(this.ruleForm.cityCode)
            : this.ruleForm.cityCode
      };
      // 附件处理
      rst.ossUrlList = this.$refs.file.fileLists;
      console.log(rst.ossUrlList);
      // console.log(this.cfileList)
      delete rst.createTime;
      delete rst.submitTime;
      delete rst.approvalTime;
      delete rst.approvalStatus;
      delete rst.modifiedTime;
      return rst;
    }
  }
};
</script>

<style lang="scss" scoped>
.jk {
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
}
.jk2 {
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
}
.out-style {
  width: 100%;
  background: #fff;
  padding: 60px 120px;
}

.inner-style {
  width: 100%;
  margin: 0 auto;
}

h2 {
  margin: 0 0 30px;
  font-size: 18px;
  text-align: center;
}

.size {
  font-size: 15px;
}

.el-input {
  width: 80%;
}

.add-parties {
  margin-left: 12px;
}

.divider {
  width: 100%;
  border-top: 1px dashed #d9e1e9;
  margin-top: 12px;
}

.mian-title {
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 16px;
  font-size: 16px;
  border-left: 4px solid #fe8c01;
  padding-left: 10px;
  margin: 12px 0 24px 0;
}

.select {
  width: 150px;
}

.select1 {
  width: 150px;
  margin-left: 15px;
}

.select2 {
  width: 145px;
  margin-left: 15px;
}

.bnt {
  text-align: center;
  margin: 40px 0 50px 0;
}

.submit {
  width: 171px;
  height: 40px;
  margin-left: 46px;
  color: rgba(255, 255, 255, 1);
  border: none;
  background: linear-gradient(
    90deg,
    rgba(255, 192, 2, 1) 0%,
    rgba(254, 140, 1, 1) 100%
  );
}
#region{
	::v-deep .el-form-item__label{
		width: 120px !important;
	}
}
.save {
  width: 171px;
  height: 40px;
  border: 1px solid rgba(151, 151, 151, 1);
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  background-color: #ffffff;
}
</style>
